<template>
    <div style="background: #fff;">
      <div class="body">
        <router-link to="/myAddress?type=1">
          <div class="address"  v-if="JSON.stringify(address)!='{}'">
            <div class="lefts">
              <img src="../../assets/img/address.png" alt="">
            </div>
            <div class="right">
              <p class="person">收货人：{{address.name||address.accept_name}}</p>
              <span class="tele">{{this.address.tel||address.phone}}</span>
              <div class="clear"></div>
              <p class="add">收货地址：<span v-if="address.big_address">{{address.big_address+address.address}}</span><span v-else>{{address.address}}</span></p>
            </div>
            <div class="img">
              <img src="../../assets/img/rectang.png" alt="">
            </div>
            <div class="bottom">
            </div>
          </div>
          <div class="address" v-else>
            <div class="addressNone">
              <img src="@/assets/img/addAddress.png" alt="">
              <p>您还没添加收货地址，点击这里添加</p>
            </div>
            <div class="img">
              <img src="../../assets/img/rectang.png" alt="">
            </div>
          </div>
        </router-link>
        <goods style="margin-top: 4vw;" :goodsDisplay="this.orderDetail.goods"></goods>
        <productPrice style="margin-top: 4vw;" :actualPrice="this.orderDetail" :shipping_fee="shipping_fee"></productPrice>
        <invoice style="margin-top: 4vw;" @postscript="postscriptFuc"></invoice>
        <div style="margin-left: 4vw;margin-top: 1vw">
          <input type="checkbox" checked id="checkBox" style="position:relative;top: .5vw;">
          <label style="color: #999;font-size: 12px;">我已阅读并同意
            <span style="color: #ff4c50;"> <a href="https://super.napin.com/index/goods/article?article_id=14">《纳品网购买服务条款》</a></span>
          </label>
        </div>
        <div class="submits">
          <p>实际付款: <span>￥ {{pay}}</span></p>
          <button class="btn" @click="submit">提交订单</button>
        </div>
        <van-popup v-model="show" position="bottom" show-cancel-button
                   style="position:fixed;top: 35vw;height: 340px;overflow: hidden;border-radius: 2vw;width: 300px">
          <alertPay :actual="orderDetail.pay_price" :data="dataList" @close="close" :order_sn="order_sn" @isPay="isPay" v-if="!shows"></alertPay>
          <div v-else>
            <div style="text-align:center;padding-top: 50px" v-if="ispay">
              <img src="@/assets/img/mall_pay_suc@2x.png" alt="" style="width:164px;height:155px;">
              <p style="font-size: 16px;margin-top: 20px">支付成功</p>
              <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="toOrder">确定</button>
            </div>
            <div style="text-align:center;padding-top: 50px" v-else>
              <img src="@/assets/img/mall_pay_failure@2x.png" alt="" style="width:164px;height:155px;">
              <p style="font-size: 16px;margin-top: 20px">支付失败</p>
              <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="close">确定</button>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
</template>

<script>
  import goods from '../../components/order/goods'
  import productPrice from '../../components/order/productPrice'
  import invoice from '../../components/order/invoice'
  import submit from '../../components/order/submit'
  import request from '../../request/index'
  import alertPay from '../../components/vant/alertPay'
    export default {
        name: "order",
      data(){
        return{
          shows:false,
          show:false,
          returnArr:[],
          actualPrice:'399.00',
          ispay:true,
          goodsDisplay:[
            {title:'2018年冬季新款羽绒服展示抢购热门小码',
              size:'XXL',color:'红色',money:'99.8',number:'1'},
            {title:'2018年冬季新款羽绒服展示抢购热门小码',
              size:'XXL',color:'红色',money:'99.8',number:'1'}
          ],
          orderDetail:[],
          address:[],
          dataList:[],
          coupon_record_id:0,
          address_id:'',
          postscript:'',
          self_lifting: 0,
          order_sn:'',
          isGetMethod:true,
          confirm:1,
          getOrderData:[],
          shipping_fee:'10.00',
          activity:'',
          pay:''
        }
      },
      components:{
        goods,
        productPrice,
        invoice,
        submit,
        alertPay
      },
      watch:{
        show(newVal,oldVal){
          if(newVal===false){
            this.shows=false;
            this.$router.push({
              path:'/myOrder?active=1',
            })
          }
        }
      },
      created(){
        const getArr = JSON.parse(localStorage.getItem('returnArr'));
        const address= JSON.parse(localStorage.getItem('address'))||getArr.data.address;
        this.address_id=address.id||address.address_id;
        this.orderDetail = getArr.data;
        this.address =  address;
        const getOrderData = JSON.parse(localStorage.getItem('comfirm'));
        this.confirm  = getOrderData;
        console.log(this.address.id);
        this.activity = localStorage.getItem("activity");
        request.getOrderPrice(this,this.activity);
      },
      methods: {
        isPay(res){
          // this.show=!this.show;
          this.shows=true;
          this.ispay=res;
        },
        close(){
          this.show = !this.show;
        },
        submit(){
          if($('#checkBox').is(':checked')&&(JSON.stringify(this.address)!='{}')) {
            this.show = !this.show;
            if(this.isGetMethod){
              request.getPayMethod(this,this.confirm);
            }
          }else if(JSON.stringify(this.address)=='{}'){
            this.$toast("请选择收货地址");
          }else{
            this.$toast("请先勾选《纳品网购买服务条款》");
          }
        },
        none(){
          this.show = !this.show;
        },
        postscriptFuc(res){
          this.postscript=res;
        },
        toOrder(){
          this.$router.push({
            path: '/myOrder'+'?active='+2,
          })
        }

      },
    }
</script>

<style scoped lang="scss">
  .submits{
    width: 100vw;
    height: 13.33vw;
    background: #fff;
    font-size: 15px;
    color: #333;
    line-height: 13.33vw;
    text-indent: 2.5vw;
    position: fixed;
    bottom: 0px;
    .btn{
      width: 33.3vw;
      height: 100%;
      background: #000;
      color: #fff;
      float: right;
      font-size: 15px;
    }
    p{
      float: left;
      span{
        color: #ff4c50;
        font-size: 19px;
      }
    }
  }
.body{
  width:100vw;
  height:100vh;
  background: #f5f5f5;
  padding-top: 5vw;
  position: relative;
  .submit{
    width: 100vw;
    height: 13.33vw;
    background: #fff;
    font-size: 15px;
    color: #333;
    line-height: 13.33vw;
    text-indent: 2.5vw;
    position: fixed;
    bottom: 0px;
    .btn{
      width: 33.3vw;
      height: 100%;
      background: #000;
      color: #fff;
      float: right;
      font-size: 15px;
    }
    p{
      float: left;
      span{
        color: #ff4c50;
        font-size: 19px;
      }
    }
  }
  .address{
    width:92vw;
    height: 100px;
    background: #fff;
    margin:0vw auto;
    -webkit-border-radius: 2.5vw;
    -moz-border-radius: 2.5vw;
    border-radius: 2.5vw;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 0 1px 0px #ccc;
    .addressNone{
      width: 100%;
      text-align: center;
      color: #333333;
      padding-top: 27px;
      img{
        width: 20px;
      }
    }
    .bottom{
      width:100%;
      height: 1vw;
      background: url("../../assets/img/redblue.png");
      position: absolute;
      bottom: 0vw;
    }
    .img{
      width:2.33vw;
      height: 2.67vw;
      float: right;
      position: absolute;
      right: 5vw;
      top: 11vw;
      img{
        width:100%;
        height: 100%;
      }
    }
    .right{
      float: right;
      padding-right: 12vw;
      width:86%;
      height: auto;
      font-size: 15px;
      color: #333;
      padding-top:4.5vw;
      .person{
        float: left;
      }
      .tele{
        float: right;
      }
      .add{
        font-size:12px;
        color: #666;
        margin-top: 2vw;
      }
    }
     .lefts{
       float: left;
       img{
         width:4.9vw;
         height: 5.33vw;
         margin-top: 10.27vw;
         margin-left: 2vw;
         display: inline-block;
       }
     }
  }
}
.van-popup--bottom{
    width: 80vw;
  }
</style>
